* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
.displayflex {
    display: flex;
  }
  
.flex1 {
    flex: 1;
  }
  
#app {
    width: 100vw;
    height: 100vh;
    background-image: url('../images/bg.jpg');
    background-size: 100% 100%;
    font-size: 14px;
    color: #fff;
    overflow: hidden;
  }
  
.blue {
    color:rgb(53, 173, 214);
  }
  
  
.bg-part{
    position: relative;
    background: rgba(44, 119, 186, .1);
}
.bg-part:before,
.bg-part:after,
.bg-part2:before,
.bg-part2:after{
    position: absolute;
    content: '';
    width: 15px;
    height: 15px;
    border: 2px solid rgb(65, 207, 254);
}
.bg-part:before{
    top: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0;
}
.bg-part:after{
    top: 0;
    right: 0;
    border-left: 0;
    border-bottom: 0;
}
.bg-part2:before{
    bottom: 0;
    left: 0;
    border-top: 0;
    border-right: 0;
}
.bg-part2:after{
    bottom: 0;
    right: 0;
    border-top: 0;
    border-left: 0;
}
  
/* .container {
    width: 100%;
    height: 88.89vh;
    padding: 0 3.125vw 2.78vh;
} */


.wrap{
    margin: 0 auto;
    width: 90%;
}
.head h1{
    text-align: center;
}
.div2-left,.div2-right{
  /* height: 240px; */
  height: 25vh;
  width: 49.5%;
}
.div2-left,.div3-left{
      float: left;
  }
.div2-right,.div3-right{
      float: right;
  }
.div2,.div3{
      clear: both;
  }
.erect-line{
  font-size: 20px;
}
.erect-line1{
  font-size: 14px;
}
.erect-line1::before{
  content: '|';
  font-size: 18px;
  padding-right:8px;
}
.erect-line::before{
    content: '|';
    /* width: 3px; */
    font-size: 28px;
    padding-right:8px;
}
.wrap-div{
    margin:1vh 0;
    padding: 10px 40px; 
}
.display{
        border-radius: 8px;
        width: 13%;
        height: 9vh;
        display: flex;
        justify-content: center;
        align-items: center;
}
.display-1-left{
    float: left;
}
.display-1-left img{
  width: 25px;
  height: 25px;
  margin-right: 8px;
}
.display-1-right{
    float: right;
}
.display-1-right p:nth-of-type(1){
  font-size: 14px
}
.display-1-right p:nth-of-type(2){
  font-size: 30px
}
.display-1-right-1 p:nth-of-type(1){
  font-size: 12px
}
.display-1-right-1 p:nth-of-type(2){
  font-size: 20px
}
.div1{
    /* height: 190px; */
    height: 18vh;
}
.div-flex-display{
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    font-size: 12px;
}
.head{
  margin-top: 15px;
}
.display-1,.display-4,.display-7{
  background-image: -moz-linear-gradient( 180deg, rgb(100,154,243) 0%, rgb(67,187,239) 100%);
  background-image: -webkit-linear-gradient( 180deg, rgb(100,154,243) 0%, rgb(67,187,239) 100%);
  background-image: -ms-linear-gradient( 180deg, rgb(100,154,243) 0%, rgb(67,187,239) 100%);
}
.display-2,.display-5{
    background-image: -moz-linear-gradient( 180deg, rgb(129,83,242) 0%, rgb(219,90,239) 100%);
    background-image: -webkit-linear-gradient( 180deg, rgb(129,83,242) 0%, rgb(219,90,239) 100%);
    background-image: -ms-linear-gradient( 180deg, rgb(129,83,242) 0%, rgb(219,90,239) 100%);
  }
.display-3,.display-6{
    background-image: -moz-linear-gradient( 180deg, rgb(20,146,192) 0%, rgb(41,187,173) 100%);
    background-image: -webkit-linear-gradient( 180deg, rgb(20,146,192) 0%, rgb(41,187,173) 100%);
    background-image: -ms-linear-gradient( 180deg, rgb(20,146,192) 0%, rgb(41,187,173) 100%);
} 

.div2-left-p{
  float: left;
  margin:10px 20px 0px 0px;
}
.div2-right-p{
  float: right;
  margin: 10px 20px 0px 0px;
}
.div2-p p{
  margin: 18px 0px 0px 0px;
  font-size: 24px;
}
.div2-p-1 p{
  margin: 1vh 0px 0px 0px;
  font-size: 16px;
}
.div3-left,.div2-right{
  margin-bottom: 1vh;
}
.div3-left{
  width: 39%;
  height: 40vh;
}
.div3-right{
  width: 60%;
  height: 40vh;
}


.page2-div1,.page2-div2{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.page2-div1-left{
  width: 38vw;
  height: 25vh;
}
.page2-div1-middle{
  width: 28vw;
  height: 25vh;
}
.page2-div1-right{
  width: 22vw;
  height: 25vh;
}
.page2-div2-right{
  width: 22vw;
  height: 62vh;
}
.outgoing-dynamic{
  width: 28vw;
  height: 27vh;
}
.throughput{
  width: 38vw;
  height: 27vh;
}
.wrap-middle-pho{
  width: 67vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.error-detail{
  width: 67vw;
  height: 33vh;
}
.foot{
  color: #fff;
  text-align: center;
  margin: 0 auto;
  height: 1.5vh;
}